<template>
	<div>
		<section class="aui-content" id="user-info" >
			<div class="aui-list aui-media-list aui-list-noborder aui-bg-info" style="padding:14px 0">
				<div class="aui-list-item aui-list-item-middle" style="background-image:none">
					<div class="aui-media-list-item-inner" @click="myinfo">
						<div class="aui-list-item-media" style="width:3rem;">
							<img :src="user.photo" class="aui-img-round">
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-text text-white aui-font-size-18" style="color:#fff">{{user.name}}</div>
							<div class="aui-list-item-text text-white">
								<div style="color:#fff"><i class="aui-iconfont aui-icon-mobile aui-font-size-14" style="color:#fff"></i>{{user.phone}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="aui-row aui-clear-cl ">
					<div class="aui-col-xs-4 aui-border-r">
						<a href="my_newest.html">
							<div class="aui-clear-cl1">3435</div>
							<div class="aui-gird-lable aui-font-size-12">动态</div>
						</a>
					</div>
					<div class="aui-col-xs-4 aui-border-r">
						<a href="my_follow.html">
							<div class="aui-clear-cl1">433545</div>
							<div class="aui-gird-lable aui-font-size-12">关注</div>
						</a>
					</div>
					<div class="aui-col-xs-4">
						<a href="my_fans.html">
							<div class="aui-clear-cl1">67809</div>
							<div class="aui-gird-lable aui-font-size-12">粉丝</div>
						</a>
					</div>
				</div>
			</div>
		</section>
		<section class="aui-content aui-content-size">
			<div class="aui-grid">
				<div class="aui-row">
					<div class="aui-col-xs-3">
						<a href="my_subscribe.html">
							<i class="aui-iconfont aui-icon-mail aui-text-info"></i>
							<div class="aui-grid-label">订阅</div>
						</a>
					</div>
					<div class="aui-col-xs-3">
						<a href="my_collection.html">
							<i class="aui-iconfont aui-icon-like aui-text-warning"></i>
							<div class="aui-grid-label">收藏</div>
						</a>
					</div>
					<div class="aui-col-xs-3">
						<a href="my_post.html">
							<i class="aui-iconfont aui-icon-pencil aui-text-warning"></i>
							<div class="aui-grid-label">跟帖</div>
						</a>
					</div>
					<div class="aui-col-xs-3">
						<a href="my_read.html">
							<i class="aui-iconfont aui-icon-date aui-text-info"></i>
							<div class="aui-grid-label">阅读</div>
						</a>
					</div>

				</div>
			</div>
		</section>
		<div class="aui-he"></div>
		<section class="aui-content" style="padding-bottom:50px;">
			<ul class="aui-list aui-list-in " style="background-image:none">
				<li class="aui-list-item" style="background-image:none">
					<a href="my_info.html">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-location aui-text-info"></i>
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title aui-black">我的消息</div>
						</div>
					</a>
				</li>
				<div class="aui-he"></div>
				<li class="aui-list-item" style="background-image:none">
					<a href="my_newest.html">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-like aui-text-danger"></i>
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title aui-black">最新动态</div>
						</div>
					</a>
				</li>
				<div class="aui-he"></div>
				<li class="aui-list-item" style="background-image:none">
					<a href="my_off.html">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-image aui-text-info"></i>
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title aui-black">离线阅读</div>
						</div>
					</a>
				</li>
				<div class="aui-he"></div>
				<li class="aui-list-item" style="background-image:none">
					<a href="https://shop108012643.taobao.com/">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-cart aui-text-info"></i>
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title aui-black">积分商城</div>
							<div class="aui-list-item-right aui-black">0元好物在这里</div>
						</div>
					</a>
				</li>
				<div class="aui-he"></div>
				<li class="aui-list-item" style="background-image: none">
					<a href="my_feedback.html">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-cert aui-text-warning"></i>
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title aui-black">意见反馈</div>
						</div>
					</a>
				</li>
				<div class="aui-he"></div>

				<li class="aui-list-item" style="background-image: none">
					<a href="javascript:;" v-on:click="logout">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-gear aui-text-danger"></i>
						</div>
						<div class="aui-list-item-inner aui-list-item-arrow">
							<div class="aui-list-item-title aui-black">退出</div>
						</div>
					</a>
				</li>
				<div class="aui-he"></div>
			</ul>
		</section>
	</div>
</template>

<script>
	export default{
		name:'my',
		components:{},	// 再加 子组件
		data(){
			return {
				user:{
					name:'',
					photo:'/static/themes/img/photo.jpeg',
					phone:''
				}
			}
		},
		// 方法
		created(){
			// 内容没渲染前，执行的（这里可以判断是否有登录）
			console.log(this.$cookie.get('user'))		// 没有是 null
			if(this.$cookie.get('user')==null){
				// 没有登录
				this.$router.push('/login')
				return;
			}
		},
		mounted(){
			// 插件调用代码，自己写的脚本代码（这里可以显示账号、头像的内容）
			// console.log(this.$store.state.my.user)
			let user = this.$cookie.get('user')
			if(user!=null){
				user = JSON.parse(user)	// json对象
				// console.log(user)	// 用户信息
				this.user.name = user.user_name
				this.user.photo = user.user_pic
				this.user.phone = user.user_phone
			}
		},
		// 计算属性
		computed:{
			// 写函数
		},
		methods:{
			// 写事件函数
			logout(){
				// 退出登录，删除cookie
				this.$cookie.delete('user')

				// 跳转回登录页
				this.$router.push('/login')
				return;	// 程序结束
			},
			myinfo(){
				// 跳转个人资料页
				this.$router.push('/myinfo')
			}
		}
	}
</script>

<style>
	/*点击头像没有白色背景*/
	.aui-list .aui-list-item:active{
		background:none;
	}
</style>